<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

	<style type="text/css">
	.stage{
		width:500px;
        height:300px;
        margin:10px auto;
	}
	.background{
		position: absolute;
		perspective: 1000px;
		width: auto;
		height: auto;
		left: 50%;
        top: 50%;
		font-size: 4em;
		transform-style: preserve-3d;
		perspective-origin: 0% 0%;
		/* animation: move-retate infinite 2s;    */

	}
	.background:hover{
		animation-play-state: paused;
	}
	

	.background .side {
		position: absolute;
		width: 2em;
		height: 2em;
		left: -1em;
		top: -1em;
		background: rgba(255, 99, 71, 0.6);
		border: 1px solid rgba(0, 0, 0, 0.5);
		color: white;
		text-align: center;
		line-height: 2em;


    }

  ul{  
    position:relative;  
    height:300px;  
    width:300px;  
    list-style:none;  
    margin:100px auto;  
    transform-style:preserve-3d;  
    animation:ani 4s linear 0s infinite;  
  }  
  ul:hover{
    animation-play-state: paused;
  }
  li{  
    position:absolute;  
    height:300px;  
    width:300px;  
    font-size:5em;  
    text-align:center;  
    line-height:300px;  
    backface-visibility: hidden;  
  }  
  li:nth-child(1){  
    background-color: green;  
    transform: translateZ(150px);   
  }  
  li:nth-child(2){  
    background-color:yellow;  
    transform: rotateY(90deg) translateZ(150px);  
  }  
  li:nth-child(3){  
    background-color:orange;  
    transform: rotateX(90deg) translateZ(150px);  
  }  
  li:nth-child(4){  
    background-color:red;  
    transform: rotateX(-90deg) translateZ(150px);  
  }  
  li:nth-child(5){  
    background-color:blue;  
    transform: rotateY(-90deg) translateZ(150px);    
  }  
  li:nth-child(6){  
    background-color:purple;  
    transform: rotateX(180deg) translateZ(150px);  
  } 


@keyframes move-origin {
   0% {
     perspective-origin: 0%  0%;
   }
   25% {
     perspective-origin: 100%  0%;
   }
   50% {
     perspective-origin: 100% 100%;
   }
   75% {
     perspective-origin: 0%  100%;
   }
   100% {
     perspective-origin: 0%   0%;
   }
 }

 @keyframes move-retate {
   
   100% {
     transform: rotateY(360deg);
   }
 }


	</style>

</head>

<body>
  <ul>  
    <li>1</li>  
    <li>2</li>  
    <li>3</li>  
    <li>4</li>  
    <li>5</li>  
    <li>6</li>  
  </ul>  
  




<script>

var darray = [];
    for (var j = 0 ; j < 3; j++){
        var d = {
            avatar:'/static/images/default.jpg',
            name:'张'+(Math.random() * 100),
            remark:""+j
        };
        darray.push(d);
    }

console.log(typeof darray)
console.log(JSON.stringify(darray))

$.ajax({
        url: 'http://192.168.1.50/overview/getLotteryWinnersInfo',
        method: 'POST',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(darray) 
    }).done(function (response) {
        if (response.code === 0) {
            alert('保存中奖人信息成功');
        } else {
        	console.log(response)
        }
    });
	
</script>

</body>
</html>